<template>
  <grid title="歌单管理">
    <el-form inline
             style="width: 100%; text-align: left"
             label-width="60px"
             @submit.native.prevent="onSubmit"
             @reset.native.prevent="onReset"
             size="small">
      <el-form-item label="歌单名">
        <el-input v-model="query.q"
                  placeholder="请输入关键词"
                  clearable></el-input>
      </el-form-item>

      <el-form-item label="发布状态"
                    label-width="80px">
        <el-select v-model="query.status">
          <el-option label="全部"
                     value="all"></el-option>
          <el-option label="未发布"
                     value="down"></el-option>
          <el-option label="发布中"
                     value="up"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary"
                   native-type="submit">筛选</el-button>
        <el-button native-type="reset">重置</el-button>
      </el-form-item>
      <el-form-item style="float:right">
        <el-button type="primary"
                   @click="create">新建歌单</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list"
              border
              :resizable="false"
              stripe>
      <el-table-column type="index"
                       label="编号"
                       width="60"
                       align="center"></el-table-column>
      <el-table-column prop="name"
                       label="歌单名">
      </el-table-column>
      <el-table-column prop="name"
                       label="标签">
        <template slot-scope="scope">
          <el-tag v-for="(tag,index) in scope.row.tags"
                  :key="index">{{ tag }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status"
                       label="状态">
        <template slot-scope="scope">
          <normal-status :data="scope.row"></normal-status>
        </template>
      </el-table-column>
      <el-table-column prop="created_at"
                       label="创建时间">
        <template slot-scope="scope">
          {{scope.row.created_at | timeFilter }}
        </template>
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="240">
        <template slot-scope="{row}">
          <el-button type="text"
                     size="small"
                     :disabled="row.is_default"
                     @click="setDefault(row)">默认</el-button>
          <el-button type="text"
                     size="small"
                     @click="playMenu(row)">播放</el-button>
          <el-button type="text"
                     size="small"
                     @click="editRow(row)">修改</el-button>
          <template v-if="row.status === 1">
            <el-button type="text"
                       @click="offlineRow(row)"
                       size="small">下架</el-button>
          </template>
          <template v-else>
            <el-button type="text"
                       @click="onlineRow(row)"
                       size="small">上架</el-button>
          </template>
          <el-button type="text"
                     @click="deleteRow(row)"
                     size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="total, prev, pager, next"
                   background
                   @current-change="fetch"
                   :current-page.sync="query.page"
                   :page-size="query.limit"
                   hide-on-single-page
                   style="display: flex;justify-content: center;"
                   :total="total">
    </el-pagination>
    <menu-edit-dialog ref="menuEditDialog"></menu-edit-dialog>
  </grid>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import listMixin from '@/mixin/list'
import { destory, offline, online, fetchView, setDefault } from './api'
import menuEditDialog from './components/menu-edit'

export default {
  title: '歌单管理',
  data () {
    return {
      query: {
        limit: 12,
        page: 1,
        q: undefined,
        status: 'all'
      }
    }
  },
  mixins: [listMixin],
  async asyncData ({ store, route }) {
    const { query } = route;
    return store.dispatch('music/menu/fetchList', { page: 1, limit: 12, ...query })
  },
  components: {
    menuEditDialog
  },
  computed: {
    ...mapGetters('music/menu', ['list', 'total'])
  },
  methods: {
    ...mapActions('music/menu', ['fetchList']),
    ...mapActions('player', ['replaceSongList']),
    fetch () {
      this.fetchList(this.query)
    },
    async playMenu ({ id }) {
      const { data: { data } } = await fetchView(id)
      this.$player.replaceList(data.songs)
    },
    async create () {
      const { refresh } = await this.$refs.menuEditDialog.open(false)
      if (refresh) {
        this.fetch()
      }
    },
    async editRow ({ id }) {
      const { refresh } = await this.$refs.menuEditDialog.open(id)
      if (refresh) {
        this.fetch()
      }
    },
    async offlineRow ({ id }) {
      await this.$confirm('确定要下架？', '警告')
      await offline(id)
      this.$message.success('操作成功')
      this.fetchList(this.query)
    },
    async onlineRow ({ id }) {
      await this.$confirm('确定要上架？', '警告')
      await online(id)
      this.$message.success('操作成功')
      this.fetchList(this.query)
    },
    async deleteRow ({ id }) {
      await this.$confirm('确定删除？', '警告')
      await destory(id)
      this.$message.success('删除成功')
      this.fetchList(this.query)
    },
    async setDefault ({ id }) {
      await this.$confirm('将设置该歌单为默认获取歌单 确定要执行么', '警告')
      await setDefault(id)
      this.$message.success('设置默认成功')
      this.fetchList(this.query)
    }
  }
}
</script>

